<!--  -->
<template>
  <div class="group-item">
    <h3>{{ title }}</h3>
    <!--chatId-->
    <div class="group-watch flex">
      <div class="watch" v-if="datumObj.groupName && !chatId">
        <h4 class="flex-a-c">
          {{ datumObj.groupName }}
          <slot name="look"></slot>
        </h4>
        <p>{{ datumObj.send_group_count }}</p>
      </div>
      <!--watch_count观看次数-->
      <div class="watch" v-if="datumObj.viewName">
        <h4>{{ datumObj.viewName }}</h4>
        <p>{{ datumObj.watch_count }}</p>
      </div>
      <div class="watch" v-if="datumObj.live_member_count || datumObj.live_member_count == '0'">
        <h4>{{ datumObj.liveMemberCount }}</h4>
        <p>{{ datumObj.live_member_count }}</p>
      </div>
      <!--视频标签-->
      <div class="watch" v-if="datumObj.member_count || datumObj.member_count == '0'">
        <h4>{{ datumObj.memberCountName }}</h4>
        <p>{{ datumObj.member_count }}</p>
      </div>
      <div class="watch" v-if="datumObj.finish_ratio && chatId">
        <h4>{{ datumObj.finishRatio }}</h4>
        <p>{{ datumObj.finish_ratio }}</p>
      </div>
      <!--直播的标签显示-->
      <div class="watch" v-if="datumObj.live_finish_ratio">
        <h4>{{ datumObj.liveFinishRatio }}</h4>
        <p>{{ datumObj.live_finish_ratio }}</p>
      </div>
      <div class="watch" v-if="datumObj.back_member_count || datumObj.back_member_count == '0'">
        <h4>{{ datumObj.backMemberCount }}</h4>
        <p>{{ datumObj.back_member_count }}</p>
      </div>
      <div class="watch back-watch" v-if="datumObj.back_finish_ratio && chatId">
        <h4>{{ datumObj.backFinishRatio }}</h4>
        <p>{{ datumObj.back_finish_ratio }}</p>
      </div>
      <div class="watch" v-if="datumObj.liveName"> <!--一期的直播字段-->
        <h4 class="flex-a-c">{{ datumObj.liveName }}</h4>
        <p>{{ datumObj.live_count }}</p>
      </div>
      <div class="watch" v-if="datumObj.watch_finish_count">
        <h4 class="flex-a-c">{{ datumObj.finishName }}</h4>
        <p>{{ datumObj.watch_finish_count }}</p>
      </div>
      <div class="watch" v-if="datumObj.answerName">
        <h4>{{ datumObj.answerName }}</h4>
        <p>{{ datumObj.reply_right_count }}</p>
      </div>
      <div class="watch packet" v-if="datumObj.packethName">
        <h4 class="flex-a-c">{{ datumObj.packethName }}<slot name="look"></slot></h4>
        <p>{{ datumObj.reward_price || "0.00" }}</p>
      </div>
      <div class="watch user-watch" v-if="datumObj.userName && chatId">
        <h4 class="flex-a-c">
          {{ datumObj.userName }}
        </h4>
        <slot name="user"></slot>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  props: ["title", "datumObj", "chatId"],
  name: "",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
.group-item {
  padding: 0.75rem 0.75rem 0 0.75rem;
  background-color: #fff;
  border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
  margin: 0 0 0.625rem 0;

  h3 {
    font-weight: bold;
    color: #00001c;
    font-size: 1rem;
    line-height: 1rem;
    padding: 0 0 0.75rem 0;
    border-bottom: 0.0625rem solid #f0f0f1;
    text-align: left;
  }

  .group-watch {
    padding: 1rem 0 0.8125rem 0;
    flex-wrap: wrap;
    .watch {
      flex: 0 0 33.3%;
      margin: 0 0 21px 0;
      &:nth-child(1n +3){
        margin: 0;
      }
      // padding: 0 4.1875rem 0 0;
      h4 {
        font-size: 0.75rem;
        line-height: 0.75rem;
        color: #6e6e79;
        padding-bottom: 0.3125rem;
        text-align: left;
      }

      p {
        text-align: left;
        color: #00001c;
        line-height: 1.25rem;
        // font-weight: 500;
        font-weight: bold;
      }
    }
    .user-watch {
      flex:0 0 36%;
    }
    .back-watch {
      flex:0 0 30%;
    }
    .packet {
      flex: 1;
    }
  }
}
</style>
